<template>
  <div>
    <img src="../../../static/image/logo-2.png" mode="widthFix" class="logo" />
    <input
      type="text"
      placeholder="请输入昵称"
      class="nickName"
      maxlength="11"
      v-model="nickName"
    />
    <input
      type="text"
      placeholder="请输入电话号码"
      class="cellphone"
      maxlength="11"
      v-model="cellphone"
    />
    <input
      type="password"
      placeholder="请输入密码"
      class="password"
      v-model="password"
    />
    <button class="login-btn" @click="register()">注册</button>
  </div>
</template>
<script>
/* eslint-disable */
// import qs from "qs";
import axios from "axios";

export default {
  name: "Register",
  data() {
    return {
      cellphone: "",
      password: "",
      nickName: "",
    };
  },
  methods: {
    register: function () {
      axios.defaults.baseURL = process.env.BASE_API;
      var params = {
        nickName: this.nickName,
        cellphone: this.cellphone,
        password: this.password,
      };
      axios
        .post("/api/user/register", params, {
          // qs.stringify(params)
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then(this.registerSucc);
    },
    registerSucc(res) {
      if (res.data == "success") {
        this.$toast("注册成功，请登录");
        console.log("register success. go to login page");
        this.$router.push("/login");
      } else {
        this.$toast("注册失败", 6000);
      }
    },
  },
};
</script>
<style scoped>
.logo {
  width: 70%;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cellphone,
.nickName,
.password {
  border: solid 1px #e0e0e0;
  font-size: 0.3rem;
  color: #333;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 1px;
  margin-top: 0.2rem;
  height: 0.6rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

.login-btn {
  background-color: #3474ff;
  color: #fff;
  display: block;
  font-size: 0.4rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.6rem;
  width: 70%;
  height: 0.9rem;
}

.login-btn:active {
  background-color: #0052ff;
}
</style>
